<template>
   <div class="yy-screen">
      <div class="yy-screen-empl">
        <el-carousel height="100%" direction="vertical" :autoplay="true" :interval="1000000" :pause-on-hover="false" style="height: 100%;">
          <el-carousel-item v-for="(pageArr, pageIndex) in paging.departData" :key="pageIndex">
            <div class="yy-screen-empl_list">
              <div class="yy-screen-empl_list-item" v-for="(empls, rowIndex) in pageArr" :key="rowIndex">
                <div class="yy-screen-empl_list-content" v-for="(dept, columnIndex) in empls" :key="dept.id" :style="columnIndex < empls.length - 1 ? 'flex: 3;': 'flex: 2;'">
                  <div class="yy-screen-empl_list-content-dept">{{dept.departName}}</div>
                  <div class="yy-screen-empl_list-content-data">
                    <div class="yy-screen-empl_list-content-data-item" v-for="(empl, emplIndex) in dept.employees" :key="empl.emplId" :style="columnIndex < empls.length - 1 ? 'width: 33.33%;':'width: 50%;'">
                      <div v-if="!empl || !empl.doctorName" class="yy-screen-empl_list-content-data-item-content" :style="(columnIndex < empls.length - 1 && emplIndex < 3) || (columnIndex === empls.length - 1 && emplIndex < 2) ? 'background: #7bb0f4;' : ''">
                            <span style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; opacity: 0.2;">
                              <img style="max-height: 80%; max-width:80%;" src=""/>
                             </span>
                      </div>
                      <div v-else class="yy-screen-empl_list-content-data-item-content" :style="(columnIndex < empls.length - 1 && emplIndex < 3) || (columnIndex === empls.length - 1 && emplIndex < 2) ? 'background: #7bb0f4;' : ''">
                        <div class="yy-screen-empl_list-content-data-item-content-title">
                          <div>{{empl.doctorName}}</div>
                          <div style="padding-left: 0.5rem;font-size: 0.2rem;">{{empl.doctorLevelName}}</div>
                        </div>
                        <div class="yy-screen-empl_list-content-data-item-content-desc">
                          <div class="yy-screen-empl_list-content-data-item-content-desc-photo">
                              <span style="display: flex; width: 100%; max-height: 100% ; align-items: flex-start; justify-content: flex-start;">
                                <span v-if="!empl.doctorPhoto"  style="width: 100%; display: flex; height: 2.09rem; background: #ddd;align-items: center;">
                                  <img style="max-width: 100%; max-height:100%;" src=""/>
                                </span>
                                <img v-else style="max-width: 100%; max-height:100%;" :src="baseUrl + empl.doctorPhoto" />
                            </span>
                          </div>
                          <div class="yy-screen-empl_list-content-data-item-content-desc-remark">
                            {{empl.doctorAbility}}
                          </div>
                        </div>
                        <div class="yy-screen-empl_list-content-data-item-content-schedule">
                          <div v-for="schedule in empl.listCategory" :key="schedule.categoryId">
                            <span>{{schedule.categoryName}}:</span>
                            <span  v-for="(clinchours, clinicIndex) in schedule.listClinicHours">
                              <span style="display: inline-block; margin:0 0.1rem;">{{weekDay[clinchours.scheduleWeek]}}</span>
                              <span>{{clinchours.clinicHoursName}}</span>
                              <span v-if="clinicIndex < schedule.listClinicHours.length - 1">,</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="yy-screen-schedule">
        <div class="yy-screen-schedule_source">
          <div class="yy-screen-schedule_title">今日专家号源情况</div>
          <div class="yy-screen-schedule_subtitle">
            <div>时段</div>
            <div>医师</div>
            <div style="flex: 2;">科室</div>
            <div>余号</div>
          </div>
          <div class="yy-screen-schedule_list">
            <vue3-seamless-scroll  :step="1" isRemUnit :singleHeight="0.6"  :limitScrollNum="12" :singleWaitTime="2000" :list="screenData.sources" class="yy-screen-schedule_list-scroll">
              <div class="yy-screen-schedule_list-scroll-item"
                   v-for="(item, index) in screenData.sources" :key="index">
                <div>{{ item.time }}</div>
                <div>{{ item.doctorName }}</div>
                <div style="flex: 2;">{{ item.departName }}</div>
                <div>{{ item.yh }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
        <div class="yy-screen-schedule_stops">
          <div class="yy-screen-schedule_title">今日停诊专家</div>
          <div class="yy-screen-schedule_subtitle">
            <div>专家</div>
            <div style="flex: 2;">科室</div>
            <div style="flex: 2;">停诊日期</div>
          </div>
          <div class="yy-screen-schedule_list">
            <vue3-seamless-scroll :step="1" isRemUnit :singleHeight="0.6"  :limitScrollNum="12" :singleWaitTime="2000" :list="screenData.stops" class="yy-screen-schedule_list-scroll">
              <div class="yy-screen-schedule_list-scroll-item"
                   v-for="(item, index) in screenData.stops" :key="index">
                <div>{{ item.doctorName }}</div>
                <div style="flex: 2;">{{ item.departName }}</div>
                <div style="flex: 2;">{{ item.time }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
   </div>
</template>

<script setup>
  import {reactive} from "vue";
  import {resetFontSize} from '@/utils/yayi.js'
  import {Vue3SeamlessScroll} from 'vue3-seamless-scroll'
  import ScreenApi from "@/api/screen/ScreenApi";
  import WebSocketClient from "@/utils/WebSocketClient";
  import {EnvConfig} from "@/utils/index.js";
  import {useRoute} from "vue-router";

  const route = useRoute()
  const weekDay =  {
    1: '星期一',
    2: '星期二',
    3: '星期三',
    4: '星期四',
    5: '星期五',
    6: '星期六',
    7: '星期日'
  }
  const screenWidth = 4368
  const screenHeight = 1664
  let refreshTimeout = null
  let websocketClient = null

  const paging = reactive({
    // 当前返回的所有医生
    employees: [],
    // 每页显示的科室数量
    pageMaxDepart: 9,
    // 分页后的数据
    departData: []
  })

  const screenData = reactive({
     sources: [],
     stops: [],
     code: ''
  })

  const baseUrl = computed(() => EnvConfig.baseApi)

  // 计算缩放比例
  onBeforeMount(() => {
    const query = route.query || {}
    resetFontSize(screenWidth, screenHeight)
    window.onresize = function () {
      resetFontSize(screenWidth, screenHeight)
    }
    listScheduleEmpl()
    listYhxx()
    listTzxx()
    websocketClient = new WebSocketClient(EnvConfig.baseApi, query.ip || "192.168.31.226", onWebsocketMessage)

  })

  const onWebsocketMessage = (error, data) => {
    console.log("current websocket message:::", data)
  }

  const listScheduleEmpl = () => {
    ScreenApi.listScheduleEmpl().then((scheduleEmployees) => {
      paging.employees = scheduleEmployees
      let departData = [];
      scheduleEmployees.forEach((se) => {
        const exits = departData.find(item => item.departId === se.departId);
        if (exits) {
          exits.employees.push(se)
        } else {
          departData.push({
            sort: departData.length + 1,
            departId: se.departId,
            departCode: se.departCode,
            departName: se.departName,
            employees: [se]
          })
        }
      })

      // 排序
      departData = departData.sort((a, b) => a.sort - b.sort)

      // 排序后的科室
      const departs = departData.map(item => Object.assign({
        sort: departData.length + 1,
        departId: item.departId,
        departCode: item.departCode,
        departName: item.departName
      }))

      const departList = []

      // 对科室数据分页处理
      departData.forEach((depart, index) => {
        const emplCount = depart.employees.length
        // 至少多于4位
        if (emplCount > 4) {
          let pageSize = 4
          let pageCount = emplCount % pageSize === 0 ? Math.floor(emplCount / pageSize) : Math.floor(emplCount / pageSize) + 1
          const employees = depart.employees
          for (let i = 0; i < pageCount; i++) {
            departList.push(Object.assign({}, depart, {id: depart.departId + "_" + depart.itemId + "_" + (i + 1),employees: employees.slice(i * pageSize, (i + 1) * pageSize)}))
          }
        } else {
          departList.push(Object.assign({}, depart, {
            id: depart.departId + "_" + depart.itemId + "_" + 1
          }))
        }
      })

      const pagingData = []
      while(departList.length > 0) {
        for (let i = 0; i < departs.length; i ++) {
          const depart = departs[i]
          const index = departList.findIndex(d => d.departId === depart.departId && d.itemId === depart.itemId)
          if (index >= 0) {
            pagingData.push(departList[index])
            departList.splice(index ,1)
          }
        }
      }
      const pagingArr = []
      let pageIndex = 1
      const pagingBackData = [...pagingData]
      console.log(pagingBackData)
      while(pagingData.length > 0) {
        const line1 = [], line2 = [], line3 = []
        for (let i = 0; i < paging.pageMaxDepart; i ++) {
          const backIndex = paging.pageMaxDepart * (pageIndex - 1) + i
          const depart = pagingBackData[backIndex] || {
            id: new Date().getTime() + "_" + Math.floor(Math.random() * 1000),
            departName: '',
            employees: []
          }
          if ((i + 1) % 3 !== 0) {
            // 六个位
            const sameDeparts = pagingData.filter(item => item.id !== depart.id && item.departId === depart.departId)
            if (sameDeparts?.length) {
              const employees = []
              for (let s = sameDeparts.length - 1; s >= 0; s--) {
                const sameDepartEmployees = [...sameDeparts[s].employees]
                for (let e = sameDepartEmployees.length - 1; e >= 0; e--) {
                  employees.push(sameDepartEmployees[e])
                  sameDeparts[s].employees.splice(e, 1);
                  if (employees.length >= 2) {
                    break;
                  }
                }
                if (employees.length >= 2) {
                  break;
                }
              }
              const blankDeparts = sameDeparts.filter(same => !same.employees || !same.employees.length)
              blankDeparts.forEach(depart => {
                // 拼到6个位后空了就移除
                pagingData.splice(pagingData.findIndex(p => p.id === depart.id), 1)
                pagingBackData.splice(pagingBackData.findIndex(p => p.id === depart.id), 1)
              })

              depart.employees = depart.employees.concat(employees)

              const count = depart.employees.length
              // 六个位补空
              for (let i = 0; i < (6 - count); i++) {
                depart.employees.push({})
              }
            } else {
              const count = depart.employees.length
              // 六个位补空
              for (let i = 0; i < (6 - count); i++) {
                depart.employees.push({})
              }
            }
          } else if (depart.id){
            const count = depart.employees.length
            if (count < 4) {
              // 四个位补空
              for (let i = 0; i < (4 - count); i++) {
                depart.employees.push({})
              }
            }
          }
          pagingData.splice(pagingData.findIndex(p => p.id === depart.id), 1)

          if (i < 3) {
            line1.push(depart)
          } else if (i < 6) {
            line2.push(depart)
          } else {
            line3.push(depart)
          }
        }
        pagingArr.push([line1, line2, line3])
        pageIndex += 1
      }
      paging.departData = pagingArr
    })
  }

  const refresh = () => {
    window.location.reload()
  }

  const listYhxx = () => {
    ScreenApi.listYhxx().then((data) => {
      console.log('yhxx:::', data)
      screenData.sources = data?.length ? data.map(item => Object.assign({
        time: !item.sxw || item.sxw == 0 ? '上午' : '下午',
        departCode: item.ksbm,
        departName: item.ksmc,
        doctorName: item.ysmc,
        doctorCode: item.ysdm,
        yh: (item.yh || 0) + (item.dtyyyh || 0)
      })) : []
    })
  }

  const listTzxx = () => {
    ScreenApi.listTzxx().then((data) => {
      screenData.stops =  data?.length ? data.map(item => {
        const tzsj = item.tzsj
        let sjStr = ''
        if (tzsj) {
          const sjArr = tzsj.split("/");
          sjArr.forEach(sj => {
            const sjDate = sj.split("-")
            if (sjDate.length === 3) {
              sjStr += " "+sjDate[1] + '/' + sjDate[2] + ","
            } else {
              sjStr += " " +sjDate
            }
          })
        }
        return Object.assign({
          departCode: item.ksbm,
          departName: item.ksmc,
          doctorName: item.ysmc,
          doctorCode: item.ysdm,
          time: sjStr?.lastIndexOf(",") === sjStr.length - 1 ? sjStr.substring(0, sjStr.length - 1) : sjStr
        })
      }) : []
    })
  }

</script>

<style scoped lang="scss">
  :deep(.el-carousel__indicators--vertical) {
    display: none;
  }
  .yy-screen {
    background: #022ecf;
    width: 100%;
    height: 100%;
    padding: 0.2rem;
    display: flex;
    flex-direction: row;
    &-empl {
      flex: auto;
      min-width: 0;
      &_list {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        &-item {
          flex: 1;
          display: flex;
          min-height: 0;
          margin: 0;
        }
        &-content {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          padding: 0rem;
          color: #221c59;
          font-size: 0.3rem;
          min-width: 0;
          &-dept {
            flex: 0 0 0.8rem;
            background: #fff;
            border-radius: 0.08rem;
            margin: 0.05rem;
            font-size: 0.5rem;
            display: block;
            align-items: center;
            text-align: center;
            justify-content: center;
            padding: 0.05rem;
            overflow: hidden;
            font-weight: bold;
            writing-mode: vertical-lr;
            letter-spacing: 0.05rem;
          }
          &-data {
            flex: auto;
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            &-item {
              display: inline-flex;
              width: 33.33%;
              height: 50%;
              margin: 0;
              padding: 0.05rem;
              &-content {
                display: flex;
                background: #fff;
                width: 100%;
                height: 100%;
                border-radius: 0.08rem;
                flex-direction: column;
                &-title {
                  flex: 0 0 0.5rem;
                  border-bottom: 0.02rem solid #4c73c2;
                  display: flex;
                  font-weight: bold;
                  padding: 0 0.1rem;
                  align-items: center;
                }
                &-desc {
                  flex: auto;
                  min-height: 0;
                  padding: 0rem;
                  display: flex;
                  &-photo {
                    flex: 0 0 2rem;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    overflow: hidden;
                  }
                  &-remark {
                    flex: auto;
                    min-width: 0;
                    font-size: 0.2rem;
                    padding: 0.1rem;
                    overflow: hidden;
                  }
                }
                &-schedule {
                  flex: 0 0 0.6rem;
                  display: flex;
                  padding: 0 0.1rem;
                  font-size: 0.18rem;
                  flex-direction: column;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
    &-schedule {
      flex: 0 0 8rem;
      display: flex;
      flex-direction: column;
      color: #fff;
      font-size: 0.3rem;
      &_source {
        margin: 0.05rem;
        background: #80aff5;
        flex: 1;
        border-radius: 0.08rem;
        padding: 0.1rem;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      &_stops {
        margin: 0.05rem;
        background: #80aff5;
        flex: 1;
        border-radius: 0.08rem;
        padding: 0.1rem;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      &_title {
        background: #1d2089;
        flex: 0 0 0.5rem;
        font-size: 0.5rem;
        padding: 0.1rem;
        border-radius: 0.08rem;
        display: flex;
        justify-content: center;
      }
      &_subtitle {
        flex: 0 0 0.5rem;
        font-size: 0.4rem;
        padding: 0;
        display: flex;
        background: #1d2089;
        margin: 0.05rem 0;
        border-radius: 0;
        & > div {
          flex: 1;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          border-right: 0.01rem solid #8b97f7;
          padding: 0.05rem;
          height: 0.6rem;
        }
        & > div:last-child {
          border-right: 0;
        }
      }
      &_list {
        flex: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        &-scroll {
          height: 100%;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;
        }
        &-scroll-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #0433a3;
          & > div {
            flex: 1;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-right: 0.01rem solid #8b97f7;
            border-bottom: 0.01rem solid #8b97f7;
            padding: 0.05rem;
            height: 0.6rem;
            font-size: 0.3rem;
            min-width: 0;
            overflow: hidden;
            white-space: normal;
          }
          & > div:last-child {
            border-right: 0;
          }
        }
      }
    }
  }
</style>

